<template>
  <div>
    <ul class="shoplist">
      <li class="list"
          v-for="(item,index) in goodsList"
          :key="index">
        <div class="listTop">
          <div class="pic">
            <div class="picLogo">
              <img :src="getImgUrl(item.restaurant.image_path)" alt="">
            </div>
            <div class="picTip" v-if="item.restaurant.is_new === true"><span>新店</span> </div>
          </div>
          <div class="des">
            <div class="listBrand">
              <h3>
                <i>品牌</i>
                <span>{{item.restaurant.name}}</span>
              </h3>
              <div class="support">···</div>
            </div>
            <div class="listComment">
              <div class="rating">
                <img src='/static/img/star.png' alt="">
              </div>
              <span class="num">{{ item.restaurant.rating }}</span>
              <span class="monthNum">月售 <b>{{item.restaurant.recent_order_num}}</b>单</span>
            </div>
            <div class="listMoney">
              <div class="delivery">
                <span>￥{{ item.restaurant.float_minimum_order_amount }}元起 | </span>
                <span class="minFee">{{ item.restaurant.piecewise_agent_fee.tips }}</span>
              </div>
              <div class="distance">
                <span class="where">{{ item.restaurant.distance }}m |</span>
                <span>{{ item.restaurant.order_lead_time }}分钟</span>
              </div>
            </div>
          </div>
        </div>
        <div class="listBottom">
          <div class="resStyle">
            <span>{{ item.restaurant.flavors[0].name }}</span>
          </div>
          <div class="actis">
            <ul class="actDetail">
              <li v-for="(list, listIndex) in item.restaurant.activities"
                :key="listIndex">
                <i class="icon" style="background-color: rgb(240, 115, 115);">{{ item.restaurant.activities[listIndex].icon_name}}</i>
                <span class="actSale">{{ item.restaurant.activities[listIndex].tips}}</span>
              </li>
            </ul>
            <div class="actNum">
              <span>{{ item.restaurant.activities.length }}个活动</span>
              <i class="iconfont icon-downArr" style="font-size:.12rem"></i>
            </div>
          </div>
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "zhonghe",
  data() {
    return {
      goodsList: [],
      goodstatus: false,
      totalnum: 0,
    };
  },
  watch: {
    goodsList: {
      handler: function(a, b) {
        // console.log(a);
      },
      deep: true
    }
  },

  methods: {
    getList() {
      axios
        .get("../static/json/res.json", {
          params: {}
        })
        .then(result => {
          var res = result.data;
          if (res) {
            // 成功
            console.log(res);
            var list = res.items;
            this.goodsList = list;
            this.actList = goodsList.activities;
            // console.log(this.goodsList);
            // console.log(this.goodsList[0].foods[0].specfoods);
            // console.log(fooditem.specfoods)
            // console.log(this.goodsList[0].restaurant.name);
          } else {
            alert(1);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    getImgUrl(item) {
      var str = "";
      var hz = item.slice(32, 37) == "png" ? "png" : "jpeg";
      str = `//fuss10.elemecdn.com/${item}.${hz}?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/`;
      return str;
    },
    StausChange() {
      this.goodstatus = !this.goodstatus;
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
  .shoplist {
    background: white;
    .list {
      width: 100%;
      border-bottom: 1px solid #eee;
      padding: .1rem 0;
      color: #666;
      font-size: .15rem;
      .listTop{
        width: 100%;
        padding: 0 .1rem;
        display: flex;
        .pic {
          width: .65rem;
          height: 100%;
          border: 1px solid rgba(0,0,0,.08);
          position: relative;
          .picLogo {
            img {
              width: .65rem;
              height: .65rem;
            }
          }
          .picTip {
            width: .65rem;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 50;
            width: .4rem;
            height: .4rem;
            background-image: linear-gradient(135deg,#26ce61,#26ce61 50%,transparent 0);
            font-size: .12rem;
            span {
              position: absolute;
              top: .07rem;
              left: .01rem;
              display: block;
              color: #fff;
              font-weight: 700;
              transform: rotate(-45deg);
            }
          }
        }
        .des {
          flex: 1;
          margin-left: .1rem;
          display: flex;
          flex-direction: column;
          .listBrand {
            display: flex;
            h3 {
              color: #333;
              font-size: .15rem;
              font-weight: bold;
              width: 2.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              i {
                position: relative;
                margin-right: .03rem;
                padding: .01rem .03rem;
                color: #6f3f15;
                text-align: center;
                white-space: nowrap;
                font-weight: 700;
                font-size: .13rem;
                font-style: normal;
                line-height: normal;
                background-image: linear-gradient(-139deg,#fff100,#ffe339);
              }
              span {

              }
            }
          }
          .listComment {
            overflow: hidden;
            font-size: .11rem;
            .rating {
              position: absolute;
              img {
                width: .56rem;
                height: .1rem;
              }
            }
            .num {
              margin-left: .6rem;
              margin-right: .01rem;
            }
          }
          .listMoney {
            // width: 100%;
            // height: 100%;
            // background: skyblue;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            display: flex;
            font-size: .11rem;
            .delivery {
              .minFee {
                overflow: hidden;
                max-width: 1.3rem;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .distance {
              color: #999;
            }
          }
        }
      }
      .listBottom {
        padding-left: .85rem;
        font-size: .11rem;
        .resStyle {
          display: inline-block;
          padding: 0 .05rem;
          color: rgb(102, 102, 102);
          border: 1px solid #ddd;
          flex-wrap: wrap;
          align-items: center;
          margin-top: .06rem;
        }
        .actis {
          display: flex;
          position: relative;
          justify-content: space-between;
          align-content: stretch;
          overflow: hidden;
          margin-top: .26rem;
          .actDetail {
            overflow: hidden;
            height: .35rem;
            li {
              position: relative;
              i {
                display: block;
                width: .15rem;
                height: .15rem;
                line-height: .15rem;
                border-radius: .01rem;
                text-align: center;
                color: white;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
              }
              .actSale {
                display: inline-block;
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                vertical-align: middle;
                margin-left: .22rem;
                max-width: 1.95rem;
              }
            }
          }
          .actNum {
            margin-right: .06rem;
          }
        }
      }
    }
  }
</style>

